<template>
	<div class="goods">
		<div class="nav">
			<div class="w">
				<a href="javascript:;" :class="{active:sortType===1}" @click="reset()">综合排序</a>
				<a href="javascript:;" @click="sort(1)" :class="{active:sortType===2}">价格从低到高</a>
				<a href="javascript:;" @click="sort(-1)" :class="{active:sortType===3}">价格从高到低</a>
				<div class="price-interval">
					<input type="number" class="input" placeholder="价格" v-model="min">
					<span style="margin: 0 5px"> - </span>
					<input type="number" placeholder="价格" v-model="max">
					<y-button text="确定" classStyle="main-btn" @btnClick="reset" style="margin-left: 10px;"></y-button>
				</div>
			</div>
		</div>

		<!--商品-->
		<div class="" v-loading="loading" element-loading-text="加载中...">
			<div class="goods-box w">
				<mall-goods v-for="(item,i) in computer" :key="i" :msg="item"></mall-goods>
			</div>
		</div>
		<div class="pagination_wrap">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[12, 24, 48, 96]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next" :total="total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import Bus from '/utils/bus.js'
	import { getComputer, getComputer2 } from '/api/goods.js'
	import mallGoods from '/components/mallGoods'
	import YButton from '/components/YButton'
	export default {
		data() {
			return {
				computer: [],
				computer2: [],
				min: '',
				max: '',
				busy: false,
				timer: null,
				sortType: 1,
				windowHeight: null,
				windowWidth: null,
				params: {
					page: 1,
					pageSize: 12,
					sort: ''
				},
				loading: true,
				currentPage: 1,
				pageSize: 12,
				total: 0,
				searchVal: '',
				btext: ''
			}
		},
		methods: {
			_getComputer(sVal) {
				//如果搜索框有值
				let params = {}
				if(sVal) {
					params = {
						params: {
							ProductName: sVal
						}
					}
				} else {
					params = {
						params: {
							limit: this.params.pageSize,
							page: this.params.page,
							sort: this.params.sort,
							priceGt: this.min,
							priceLte: this.max
						}
					}
				}

				getComputer(params).then(res => {
					if(res.code === 200) {
						let data = res.data.list
						this.total = res.data.dataCount
						this.computer = data
						this.loading = false
					} else {
						clearTimeout(this.timer)
						this.busy = true
					}
				})

			},
			// 默认排序
			reset() {
				this.sortType = 1
				this.params.sort = ''
				this.params.page = 1
				this.busy = false
				this._getComputer()
			},
			// 价格排序
			sort(v) {
				v === 1 ? this.sortType = 2 : this.sortType = 3
				this.params.sort = v
				this.params.page = 1
				this.busy = false
				this._getComputer()
			},
			// 加载更多
			loadMore() {
				this.busy = true
				this.timer = setTimeout(() => {
					this.params.page++
						this._getComputer(true)
					this.busy = false
				}, 500)
			},
			handleSizeChange(val) {
				this.params.pageSize = val
				this._getComputer()
			},
			handleCurrentChange(val) {
				this.params.page = val
				this._getComputer()
			},
			searchProcucts() {
				let params = {
					params: {
						ProductName: this.searchVal,
					}
				}
				getComputer(params).then(res => {
					if(res.code === 200) {
						let data = res.data.list
						this.total = res.data.dataCount
						this.computer = data
						this.loading = false
					} else {
						clearTimeout(this.timer)
						this.busy = true
					}
				})
			},

		},
		created() {
			let _this = this
			//路由参数判断
			let sVal = _this.$route.params.sVal 
			console.log('_this.$route', _this.$route)
			
			console.log('sVal', sVal)
			if(sVal != undefined) {
				_this._getComputer(sVal)
			} else {
				this._getComputer()
			}
			
			Bus.$on('getTarget', target => {
				if(target != undefined) {
					_this._getComputer(target) 
				}
			});
		},
		mounted() {
			this.windowHeight = window.innerHeight
			this.windowWidth = window.innerWidth
		},
		components: {
			mallGoods,
			YButton
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	@import "../../assets/style/mixin";
	@import "../../assets/style/theme";
	.pagination_wrap {
		clear: both;
		margin: 0 auto;
		width: 1200px;
		text-align: right;
		padding-top: 15px;
	}
	
	.nav {
		height: 60px;
		line-height: 60px;
		>div {
			display: flex;
			align-items: center;
			a {
				padding: 0 15px;
				height: 100%;
				@extend %block-center;
				font-size: 12px;
				color: #999;
				&.active {
					color: #5683EA;
				}
				&:hover {
					color: #5683EA;
				}
			}
			input {
				@include wh(80px, 30px);
				border: 1px solid #ccc;
			}
			input+input {
				margin-left: 10px;
			}
		}
		.price-interval {
			padding: 0 15px;
			@extend %block-center;
			input[type=number] {
				border: 1px solid #ccc;
				text-align: center;
				background: none;
				border-radius: 5px;
			}
		}
	}
	
	.load-more {
		text-align: center;
		background: #fff
	}
	
	.goods-box {
		>div {
			float: left;
			border: 1px solid #efefef;
		}
	}
</style>